<script lang="ts" setup>
import { toRefs } from "vue";

const count = 11;
const props = defineProps<{
    playState: boolean
}>()

const { playState } = toRefs(props)

</script>

<template>
    <div class="sound-wave">
        <div class="wave-item" :class="{play:playState}" v-for="i in count" :key="i"></div>
    </div>
</template>

<style lang="scss" scoped>
.sound-wave {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wave-item {
    width: 3px;
    height: 7px;
    background: whitesmoke;
}

.wave-item:nth-child(6) {
    transform: scaleY(3);
}

.wave-item:nth-child(5),
.wave-item:nth-child(7) {
    transform: scaleY(2);
}

.wave-item:nth-child(4),
.wave-item:nth-child(8) {
    transform: scaleY(1.5);
}


.wave-item.play:nth-child(6) {
    animation: centerAnimate 1s linear infinite;
}

.wave-item.play:nth-child(5),
.wave-item.play:nth-child(7) {
    animation: animate57 1s linear infinite;
}

.wave-item.play:nth-child(4),
.wave-item.play:nth-child(8) {
    animation: animate48 1s linear infinite;
}

.wave-item.play:nth-child(3),
.wave-item.play:nth-child(9) {
    animation: animate57 1s linear infinite;
}




@keyframes centerAnimate {
    0% {
        transform: scaleY(1);
    }

    33% {
        transform: scaleY(1.2);
    }

    66% {
        transform: scaleY(3);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes animate57 {
    0% {
        transform: scaleY(0.8);
    }

    33% {
        transform: scaleY(1.5);
    }

    66% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(0.8);
    }
}

@keyframes animate48 {
    0% {
        transform: scaleY(2.5);
    }

    33% {
        transform: scaleY(1.5);
    }

    66% {
        transform: scaleY(0.8);
    }

    100% {
        transform: scaleY(2.5);
    }
}
</style>